<template>

	<gracePage headerBG="#EB5D4B" statusBarBG="#EB5D4B">
		<!-- 页面头部 -->
		<view slot="gHeader">
			<view class="grace-header-body">
				<view class="grace-flex grace-rows grace-flex-vcenter" style="margin-left: 40rpx;" @tap="changeAddress">
					<text style="color: #FFFFFF;font-size: 28rpx;">{{locAddress}}</text>
					<text class="grace-icons grace-header-icons icon-arrow-down grace-white" style="font-size: 18rpx;width: 20rpx;margin-left: 10rpx;margin-right: 20rpx;"></text>
				</view>
				<view class="grace-header-content" style="margin-right: 20rpx;">
					<view style="width:100%;">
						<graceSearch borderRadius="10rpx" @tapme="goSearch" :disabled="true" placeholder="输入搜索条件"></graceSearch>
					</view>
				</view>
				<view class="grace-flex grace-columns grace-flex-vcenter" style="margin-right: 20rpx;" @click="scanCode">
					<text class="grace-icons icon-scan grace-white" style="font-size: 48rpx;"></text>
				</view>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<view class="hede-bg" style="padding-top: 30rpx;">
				<!-- <view class="grace-flex grace-rows grace-flex-center grace-flex-vcenter" style="height: 200rpx;">
					<view class="grace-flex grace-columns grace-flex-vcenter" @click="scanCode">
						<text class="grace-icons icon-scan grace-white" style="font-size: 64rpx;"></text>
						<text style="margin-top: 10rpx;color: #FFFFFF;font-size: 28rpx;">扫一扫</text>
					</view>
					<view @tap="goPayment" class="grace-flex grace-columns grace-flex-vcenter" style="margin-left: 230rpx;">
						<text class="iconfont icon-erweima1" style="font-size: 64rpx;color: #FFFFFF;"></text>
						<text style="margin-top: 10rpx;color: #FFFFFF;font-size: 28rpx;">二维码</text>
					</view>
				</view> -->
				<!-- 轮播图 start -->
				<view style="width: 100%;margin-bottom: 40rpx;">
					<graceSwiper :swiperItems="swiperItems" :opacity="1" :width="750" :height="710" :spacing="100"></graceSwiper>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 推荐图标 start -->
			<view class="grace-grids">
				<navigator :url="'/pages/productList/productList?uid='+item.id+'&name='+item.title" class="grace-grids-items" v-for="(item, index) in indexCate"
				 :key="index">
					<image class="grace-grids-icon-img" :src="gRequest.apiUrlImages+item.image" mode="widthFix"></image>
					<text class="grace-grids-text">{{ item.title.slice(0,4) }}</text>
				</navigator>
			</view>
			<view class="grace-common-line"></view>
			<view style="padding: 0 40rpx;background-color: #FFFFFF;" :class="[isFixed ? 'grace-fixed-top' : '']">
				<graceNavBar style="margin-bottom: 20rpx;" :items="navItems" lineHeight="60rpx" :currentIndex="navIndex" :size="180"
				 activeLineBg="#EB5D4B" textAlign="center" activeColor="#333333" activeLineWidth="80%" activeLineHeight="6rpx"
				 :margin="10" activeDirection="center" @change="navChange"></graceNavBar>
			</view>
			<view class="grace-body" style="background-color: #F8F8F8;">
				<view class="grace-img-card">
					<view class="grace-img-card-item" :data-productid="index" v-for="(item, index) in goods" :key="index" @tap="openProductInfo(item.product_id)"
					 style="background-color: #FFFFFF;padding: 0 0 20rpx;margin-top: 20rpx;border-radius: 18rpx;">
						<view class="grace-img-card-img">
							<image :src="gRequest.apiUrlImages+item.image" mode="scaleToFill" class="grace-img-card-img"></image>
						</view>
						<text class="grace-img-card-title grace-ellipsis" style="padding: 0 20rpx;color: #666666;">{{ item.name }}</text>
						<view style="padding: 0 20rpx;">
							<text class="grace-img-card-price">￥{{ item.price }}</text>
							<text class="grace-line-through grace-text-small grace-gray">￥{{ item.special_price }}</text>
						</view>
						<view class="grace-flex grace-rows grace-space-between grace-flex-vcenter" style="padding: 0 20rpx;">
							<text class="grace-capsule-text grace-text-br" style="border-color:#D42C25; color:#E14F3D;border-radius: 8rpx;padding: 5rpx 10rpx;font-size: 24rpx;">特价</text>
							<!-- <text @click="addCart" class="iconfont icon-gouwuchezhengpin" style="font-size: 40rpx;color: #E14F3D;"></text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	import graceSearch from '../../graceUI/components/graceSearch.vue';
	import graceSwiper from '../../graceUI/components/graceSwiper.vue';
	import graceNavBar from '../../graceUI/components/graceNavBar.vue';
	export default {
		data() {
			return {
				navItemsList: [],
				navItems: [],
				swiperItems: [],
				navIndex: 0,
				indexCate: [],
				goods: [],
				indexCateAndProducts: [],
				top: 0,
				images: [],
				locAddress: "",
				isFixed: false,
				headerHeight: 440,
			};
		},
		onPageScroll: function(e) {
			// 根据滚动高度动态吸顶
			if (e.scrollTop >= this.headerHeight) {
				this.isFixed = true;
			} else {
				this.isFixed = false;
			}
		},
		onLoad: function() {
			this.sendRequest({
				url: "/gimages/getindexcateimages",
				method: "get",
				data: {},
				hideLoading: false,
				success: (res) => {
					console.log("获取数据:" + JSON.stringify(res));
				}
			})
			// 加载首页推荐图标
			this.gRequest.get('/gimages/getindexcateimages', {}, res => {
				this.setData({
					indexCate: res.data
				});
			});
			// 定位
			this.gRequest.get('/citys/getcity', {}, res => {
				this.locAddress = res.data.city
			});
			//轮播图
			this.getSwiperItems()
			//获取商品分类接口
			this.getNavItemsList()
		},
		components: {
			gracePage,
			graceSearch,
			graceSwiper,
			graceNavBar
		},
		methods: {
			scanCode() {
				uni.showToast({
					title:"敬请期待！",
					icon:"none"
				})
				return
				uni.scanCode({
					success: (res) => {

					}
				});
			},
			goPayment() {
				uni.navigateTo({
					url: '../paymentCode/paymentCode'
				});
			},
			changeAddress: function(e) {
				// uni.navigateTo({
				// 	url: '../locAddress/locAddress'
				// });
			},
			goSearch: function(e) {
				uni.navigateTo({
					url: '../search/search'
				});
			},
			navChange: function(index) {
				this.navIndex = index;
				this.goods = []
				this.getGoods()
			},
			getGoods: function() {
				this.gRequest.get('/product/productlist2', {
					category_id: this.navItemsList[this.navIndex].category_id
				}, res => {
					this.setData({
						goods: res.data
					})
				});
			},
			getNavItemsList: function() {
				this.gRequest.get('/product/getcategory', {}, res => {
					let arr = []
					for (let i = 0; i < res.data.length; i++) {
						arr.push(res.data[i].category_name)
					}
					this.setData({
						navItemsList: res.data,
						navItems: arr
					});
					setTimeout(() => {
						this.getGoods()
					}, 100)
				});
			},
			// 猜你喜欢
			getSwiperItems: function() {
				this.gRequest.get('/gimages/getindeximages', {}, res => {
					for (let i = 0; i < res.data.length; i++) {
						res.data[i].img = this.gRequest.apiUrlImages + res.data[i].image
					}
					this.setData({
						swiperItems: res.data
					});
				});
			},
			// 打开商品详情
			openProductInfo: function(e) {
				uni.navigateTo({
					url: '../productInfo/productInfo?product_id=' + e
				});
			}
		}
	};
</script>
<style>
	.grace-fixed-top {
		top: 160rpx;
	}
	/* 九宫格个性修饰 */
	.grace-grids-items {
		width: 20%;
		padding: 25rpx 0;
		box-sizing: border-box;
	}

	.grace-grids-image {
		width: 80rpx;
		height: 80rpx;
	}

	/* 产品列表修饰 */
	.grace-img-card-img {
		height: 340rpx;
	}

	.grace-img-card-price {
		margin-right: 20rpx;
	}

	.hede-bg {
		background-image: url('../../static/header_bg.png');
		background-size: 100% auto;
		background-position: top left;
		background-repeat: no-repeat;
	}
</style>
